import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
// 引入路由
import {withRouter} from "react-router-dom"

class Tabbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: '/',
      hidden: false,
      fullScreen: true,
    };
  }
  render() {
    return (
      <div className="tabbar" style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#676767"
          tintColor="#ff424a"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="index"
            icon={<i className="iconfont icon-shouye"></i>}
            selectedIcon={<i className="iconfont icon-shouye" style={{color:"#ff424a"}}></i>}
            selected={this.props.location.pathname === "/"}
            // 跳转到路由
            onPress={() => {
              this.props.history.push("/")
            }}
          >
            {/* 通过插槽的方式渲染 */}
            {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <i className="iconfont icon-fenlei"></i>
            }
            selectedIcon={
              <i className="iconfont icon-fenlei" style={{color:"#ff424a"}}></i>
            }
            title="分类"
            key="category"
            selected={this.props.location.pathname === "/category"}
            // 跳转到路由
            onPress={() => {
              this.props.history.push("/category")
            }}
          >
          {/* 通过插槽的方式渲染 */}
          {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-gouwuche"></i>}
            selectedIcon={
              <i className="iconfont icon-gouwuche" style={{color:"#ff424a"}}></i>
            }
            title="购物车"
            key="cart"
            selected={this.props.location.pathname === "/cart"}
            // 跳转到路由
            onPress={() => {
              this.props.history.push("/cart")
            }}
          >
          {/* 通过插槽的方式渲染 */}
          {this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-ziyuan"></i>}
            selectedIcon={<i className="iconfont icon-ziyuan" style={{color:"#ff424a"}}></i>}
            title="我的"
            key="my"
            selected={this.props.location.pathname === "/my"}
            // 跳转到路由
            onPress={() => {
              this.props.history.push("/my")
            }}
          >
          {/* 通过插槽的方式渲染 */}
          {this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    )
  }
}
export default withRouter(Tabbar);